<template>
  <div>
    <form>
      <van-search
        v-model="searchkey"
        shape="round"
        background="#f93e2e"
        show-action
        placeholder="请输入搜索关键词"
        @search="onSearch"
        @cancel="onCancel"
        @input="inp"
    />
    </form>
    <div class="re" v-if="isresult">
      <result :searchkey="searchkey"></result>
    </div>
    <lishi v-else :lishi="lishi" @dellishi="dellishi" @soulishi="soulishi"></lishi>
  </div>
</template>

<script>
import lishi from '@/components/goods-list/goodssearchl'
import result from '@/components/goods-list/goodssearchr'
export default {
  data () {
    return {
      searchkey: '',
      isresult: false,
      lishi: []
    }
  },
  props: {

  },
  components: {
    lishi,
    result
  },
  created () {

  },
  mounted () {

  },
  methods: {
    onSearch() {
      this.isresult = true
      const res = this.lishi.find(x => (x === this.searchkey))
      if (!res) {
        this.lishi.unshift(this.searchkey)
      }
    },
    fn() {
      if (!this.searchkey) {
        this.isresult = false
      }
    },
    dellishi(val) {
      this.lishi.splice(val, 1)
    },
    soulishi(val) {
      this.searchkey = val
      this.isresult = true
    },
    onCancel() {
      this.$emit('closesearch')
    },
    inp() {
      if (!this.searchkey) {
        this.isresult = false
      }
    }
  }
}
</script>

<style scoped lang="less">
.van-search {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 100;
}
/deep/.van-search__action {
  color: #fff;
}
.re {
  padding: 0 40px;
}
</style>
